<template>
  <div class="login-page">
    <el-card class="login-card" shadow="hover">
      <div class="logo">
            <img src="../img/yz.webp" alt="永泽游戏网" />
            <span class="yz">欢迎使用永泽游戏网</span>
      </div>
      <h2 class="title">用户登录</h2>
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="register-link">
        <router-link to="/register">没有账号？去注册</router-link>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import request from '../axios/request.js'; // 确保这个 axios 实例配置了 baseURL 和 CORS 支持
import { useAuthStore } from '../stores/userStore'


const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
};

// // 处理登录
// const handleLogin = () => {
//   loginFormRef.value.validate((valid) => {
//     if (valid) {
//       request({
//         url: '/admin/login',
//         method: 'post',
//         data: {
//           username: loginForm.username,
//           password: loginForm.password,
//         },
//         withCredentials: true, // 允许发送 Cookies
//       })
//         .then((res) => {
//           if (res.data.code === 200) {
//             ElMessage.success('登录成功');
//             localStorage.setItem('token', res.data.token); // 存储 token
//             localStorage.setItem('user', JSON.stringify(res.data.user)); // 存储用户信息
//             const { role } = res.data.data;
//             if (role === '超级管理员') {
//               router.push('/adminDashboard'); // 跳转到超级管理员首页
//             } else if (role === '管理员') {
//               router.push('/home'); // 跳转到管理员首页
//             } else if (role === '用户') {
//               router.push('/gamelist'); // 跳转到普通用户首页
//             } else {
//               ElMessage.error('角色未知，请联系管理员');
//             }
//           } else {
//             // 登录失败
//             ElMessage.error(res.data.message || '登录失败');
//           }
//         })
//         .catch((err) => {
//           console.error(err);
//           ElMessage.error('请求失败，请检查网络连接');
//         });
//     } else {
//       ElMessage.warning('请填写完整的登录信息');
//     }
//   });
// };


// const handleLogin = () => {
//   loginFormRef.value.validate((valid) => {
//     if (valid) {
//       request({
//   url: '/login/login',
//   method: 'post',
//   data: {
//     username: loginForm.username,
//     password: loginForm.password,
//   },
//   withCredentials: true, 
// })
//   .then((res) => {
//     console.log("后端返回的数据:", res.data); 

//     if (res.data.code === 200 && res.data.data) { 
//       store.login(res.data.data.token, res.data.data); 
//       ElMessage.success('登录成功');

//       if (res.data.data.role === '管理员') {
//         router.push('/home');
//       } else {
//         router.push('/gamelist');
//       }
//     } else {
//       ElMessage.error(res.data.msg || '登录失败');
//     }
//   })
//   .catch((err) => {
//     console.error('请求失败:', err);
//     ElMessage.error('网络错误，请检查连接');
//   });} else {
//       ElMessage.warning('请填写完整的登录信息');
//     }
//   });
// };

const store = useAuthStore();
const router = useRouter();
const loginForm = ref({ username: '', password: '' });
const loginFormRef = ref(null);
const windowId = ref(Math.random().toString(36).substr(2, 9)); // 每次新标签页生成唯一ID

const handleLogin = async () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const res = await request({
          url: '/login/login',
          method: 'post',
          data: {
            username: loginForm.value.username,
            password: loginForm.value.password,
          },
          withCredentials: true,
        });
        if (res.data.code === 200 && res.data.data) {
          const targetPath = res.data.data.role === '管理员' ? '/home' : '/gamelist';
          const pageKey = `${targetPath}-${windowId.value}`;
          store.login(res.data.data.token, res.data.data, pageKey);
          sessionStorage.setItem('pageKey', pageKey);
          ElMessage.success('登录成功');
          router.push(targetPath);
        } else {
          ElMessage.error(res.data.msg || '登录失败');
        }
      } catch (err) {
        console.error('请求失败:', err.response?.data || err);
        ElMessage.error('登录失败，请检查用户名或密码');
      }
    }
  });
};
</script>

<style scoped>
.register-link {
  text-align: center;
  margin-top: 20px;
}

.register-link a {
  color: #409eff;
  text-decoration: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px; 
}


.logo img {
  height: 60px; 
  width: auto;  
}


.logo .yz {
  font-size: 2.4rem; 
  font-weight: bold; 
  color: black; 
}
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to right, #1e3c72, #2a5298);
}

.login-card {
  width: 400px;
  padding: 20px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.el-button {
  width: 100%;
}
</style>
